<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Form - UIkit tests</title>

        <script src="../_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Form</h1>

            <form class="uk-form uk-margin">

                <fieldset data-uk-margin>
                    <legend>Legend</legend>
                    <input type="text" placeholder="Text input">
                    <input type="password" placeholder="Password input">
                    <select>
                        <option>Option 01</option>
                        <option>Option 02</option>
                    </select>
                    <button class="uk-button">Button</button>
                    <button class="uk-button uk-button-primary">Button</button>
                     <label><input type="checkbox"> Checkbox</label>
                </fieldset>

            </form>

            <form class="uk-form uk-margin uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-4">

                    <fieldset>
                        <legend>Rows</legend>
                        <div class="uk-form-row">
                            <input type="text" placeholder="Text input">
                        </div>
                        <div class="uk-form-row">
                            <input type="password" placeholder="Password input">
                        </div>
                        <div class="uk-form-row">
                            <select>
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                        </div>
                        <div class="uk-form-row">
                            <label><input type="checkbox"> Checkbox</label>
                        </div>
                        <div class="uk-form-row">
                            <button class="uk-button">Button</button>
                        </div>
                    </fieldset>

                </div>
                <div class="uk-width-medium-1-4">

                    <fieldset>
                        <legend>States</legend>
                        <div class="uk-form-row">
                            <input type="text" placeholder=":focus">
                        </div>
                        <div class="uk-form-row">
                            <input type="text" placeholder=":disabled" disabled>
                        </div>
                        <div class="uk-form-row">
                            <input type="text" placeholder="form-danger" class="uk-form-danger" value="form-danger">
                        </div>
                        <div class="uk-form-row">
                            <input type="text" placeholder="form-success" class="uk-form-success" value="form-success">
                        </div>
                    </fieldset>

                </div>
                <div class="uk-width-medium-1-2">

                    <fieldset>
                        <legend>Sizes and styles</legend>
                        <div class="uk-form-row">
                            <input type="text" placeholder="form-large" class="uk-form-large">
                            <select class="uk-form-large">
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                            <button class="uk-button uk-button-large">Button</button>
                        </div>
                        <div class="uk-form-row">
                            <input type="text" placeholder="Default">
                            <select>
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                            <button class="uk-button">Button</button>
                        </div>
                        <div class="uk-form-row">
                            <input type="text" placeholder="form-small" class="uk-form-small">
                            <select class="uk-form-small">
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                            <button class="uk-button uk-button-small">Button</button>
                        </div>
                        <div class="uk-form-row">
                            <input type="text" placeholder="form-blank" class="uk-form-blank">
                        </div>
                    </fieldset>

                </div>
            </form>

            <form class="uk-form uk-margin">

                <fieldset>
                    <legend>Widths</legend>
                    <div class="uk-form-row" data-uk-margin>
                        <input type="text" placeholder="form-width-large" class="uk-form-width-large">
                        <input type="text" placeholder="form-width-medium" class="uk-form-width-medium">
                        <input type="text" placeholder="form-width-small" class="uk-form-width-small">
                        <input type="text" placeholder="form-width-mini" class="uk-form-width-mini">
                    </div>
                    <div class="uk-form-row" data-uk-margin>
                        <select class="uk-form-width-large">
                            <option>form-width-large</option>
                        </select>
                        <select class="uk-form-width-medium">
                            <option>form-width-medium</option>
                        </select>
                        <select class="uk-form-width-small">
                            <option>form-width-small</option>
                        </select>
                        <select class="uk-form-width-mini">
                            <option>form-width-mini</option>
                        </select>
                    </div>
                    <div class="uk-form-row" data-uk-margin>
                        <textarea cols="30" rows="1" placeholder="form-width-large" class="uk-form-width-large"></textarea>
                        <textarea cols="30" rows="1" placeholder="form-width-medium" class="uk-form-width-medium"></textarea>
                        <textarea cols="30" rows="1" placeholder="form-width-small" class="uk-form-width-small"></textarea>
                    </div>
                    <div class="uk-form-row">
                        <input type="text" placeholder="width-100" class="uk-width-1-1">
                    </div>
                    <div class="uk-form-row">
                        <select class="uk-width-1-1">
                            <option>width-100</option>
                        </select>
                    </div>
                    <div class="uk-form-row">
                        <textarea cols="30" rows="1" placeholder="width-100" class="uk-width-1-1"></textarea>
                    </div>
                </fieldset>

            </form>

            <form class="uk-form">

                <fieldset>
                    <legend>Form icon</legend>

                    <div class="uk-form-row">
                        <span class="uk-form-label">Date</span>
                        <div class="uk-form-controls" data-uk-margin>
                            <div class="uk-form-icon">
                                <i class="uk-icon-calendar"></i>
                                <input type="text">
                            </div>
                            <div class="uk-form-icon">
                                <i class="uk-icon-clock-o"></i>
                                <input type="text">
                            </div>
                            <div class="uk-form-icon uk-form-icon-flip">
                                <i class="uk-icon-calendar"></i>
                                <input type="text">
                            </div>
                            <div class="uk-form-icon uk-form-icon-flip">
                                <i class="uk-icon-clock-o"></i>
                                <input type="text">
                            </div>
                        </div>
                    </div>
                </fieldset>

            </form>

            <form class="uk-form uk-margin uk-form-stacked">

                <fieldset>
                    <legend>Form stacked</legend>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-s-it">Text input</label>
                        <div class="uk-form-controls">
                            <input type="text" id="form-s-it" placeholder="Text input"> <span class="uk-form-help-inline">Add the class <code>.uk-form-help-inline</code> for inline help text.</span>
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-s-ip">Password input</label>
                        <div class="uk-form-controls">
                            <input type="password" id="form-s-ip" placeholder="Password input">
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-s-s">Select field</label>
                        <div class="uk-form-controls">
                            <select id="form-s-s">
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-s-t">Textarea</label>
                        <div class="uk-form-controls">
                            <textarea id="form-s-t" cols="30" rows="5" placeholder="Textarea text"></textarea>
                            <p class="uk-form-help-block">Add the class <code>.uk-form-help-block</code> for help text in block elements.</p>
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <span class="uk-form-label">Radio input</span>
                        <div class="uk-form-controls">
                            <input type="radio" id="form-s-r" name="radio"> <label for="form-s-r">Radio input</label><br>
                            <input type="radio" id="form-s-r1" name="radio"> <label for="form-s-r1">1</label>
                            <label><input type="radio" name="radio"> 2</label>
                            <label><input type="radio" name="radio"> 3</label>
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <span class="uk-form-label">Checkbox input</span>
                        <div class="uk-form-controls">
                            <input type="checkbox" id="form-s-c"> <label for="form-s-c">Checkbox input</label><br>
                            <input type="checkbox" id="form-s-c1"> <label for="form-s-c1">1</label>
                            <label><input type="checkbox"> 2</label>
                            <label><input type="checkbox"> 3</label>
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <span class="uk-form-label">Mixed controls</span>
                        <div class="uk-form-controls">
                            <p class="uk-form-controls-condensed">
                                <input type="checkbox" id="form-s-mix1"> <label for="form-s-mix1">Checkbox input</label>
                                <input type="number" id="form-s-mix2" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-s-mix2">Number input</label>
                                <select id="form-s-mix3" class="uk-form-small">
                                    <option selected="selected">Option 01</option>
                                    <option>Option 02</option>
                                </select>
                                <label for="form-s-mix3">Select field</label>
                            </p>
                            <p class="uk-form-controls-condensed">
                                <label><input type="checkbox"> Checkbox input</label>
                                <label><input type="number" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> Number input</label>
                                <label>
                                    <select class="uk-form-small">
                                        <option selected="selected">Option 01</option>
                                        <option>Option 02</option>
                                    </select>
                                    Select field
                                </label>
                            </p>
                        </div>
                    </div>
                </fieldset>

            </form>

            <form class="uk-form uk-margin uk-form-horizontal">

                <fieldset>
                    <legend>Form horizontal</legend>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-it">Text input</label>
                        <div class="uk-form-controls">
                            <input type="text" id="form-h-it" placeholder="Text input"> <span class="uk-form-help-inline">Add the class <code>.uk-form-help-inline</code> for inline help text.</span>
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-ip">Password input</label>
                        <div class="uk-form-controls">
                            <input type="password" id="form-h-ip" placeholder="Password input">
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-ie">Email input</label>
                        <div class="uk-form-controls">
                            <input type="email" id="form-h-ie" placeholder="name@domain.com">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-is">Search input</label>
                        <div class="uk-form-controls">
                            <input type="search" id="form-h-is" placeholder="Search...">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-ite">Tel input</label>
                        <div class="uk-form-controls">
                            <input type="tel" id="form-h-ite" placeholder="+49 555 123456">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-iu">URL input</label>
                        <div class="uk-form-controls">
                            <input type="url" id="form-h-iu" placeholder="http://">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-if">File input</label>
                        <div class="uk-form-controls">
                            <input type="file" id="form-h-if">
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-s">Select field</label>
                        <div class="uk-form-controls">
                            <select id="form-h-s">
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-sm">Select field</label>
                        <div class="uk-form-controls">
                            <select id="form-h-sm" multiple="multiple">
                                <option>Option 01</option>
                                <option>Option 02</option>
                                <option>Option 03</option>
                                <option>Option 04</option>
                            </select>
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-t">Textarea</label>
                        <div class="uk-form-controls">
                            <textarea id="form-h-t" cols="30" rows="5" placeholder="Textarea text"></textarea>
                            <p class="uk-form-help-block">Add the class <code>.uk-form-help-block</code> for help text in block elements.</p>
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <span class="uk-form-label">Radio input</span>
                        <div class="uk-form-controls uk-form-controls-text">
                            <input type="radio" id="form-h-r" name="radio"> <label for="form-h-r">Radio input</label><br>
                            <input type="radio" id="form-h-r1" name="radio"> <label for="form-h-r1">1</label>
                            <label><input type="radio" name="radio"> 2</label>
                            <label><input type="radio" name="radio"> 3</label>
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <span class="uk-form-label">Checkbox input</span>
                        <div class="uk-form-controls uk-form-controls-text">
                            <input type="checkbox" id="form-h-c"> <label for="form-h-c">Checkbox input</label><br>
                            <input type="checkbox" id="form-h-c1"> <label for="form-h-c1">1</label>
                            <label><input type="checkbox"> 2</label>
                            <label><input type="checkbox"> 3</label>
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <span class="uk-form-label">Mixed controls</span>
                        <div class="uk-form-controls uk-form-controls-text">
                            <p class="uk-form-controls-condensed">
                                <input type="checkbox" id="form-h-mix1"> <label for="form-h-mix1">Checkbox input</label>
                                <input type="number" id="form-h-mix2" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-h-mix2">Number input</label>
                                <select id="form-h-mix3" class="uk-form-small">
                                    <option selected="selected">Option 01</option>
                                    <option>Option 02</option>
                                </select>
                                <label for="form-h-mix3">Select field</label>
                            </p>
                            <p class="uk-form-controls-condensed">
                                <label><input type="checkbox"> Checkbox input</label>
                                <label><input type="number" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> Number input</label>
                                <label>
                                    <select class="uk-form-small">
                                        <option selected="selected">Option 01</option>
                                        <option>Option 02</option>
                                    </select>
                                    Select field
                                </label>
                            </p>
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-ic">Color input</label>
                        <div class="uk-form-controls">
                            <input type="color" id="form-h-ic" placeholder="#000000">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-in">Number input</label>
                        <div class="uk-form-controls">
                            <input type="number" id="form-h-in" min="0" max="10" value="5">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-ir">Range input</label>
                        <div class="uk-form-controls">
                            <input type="range" id="form-h-ir" value="10">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-id">Date input</label>
                        <div class="uk-form-controls">
                            <input type="date" id="form-h-id" placeholder="1970-01-01">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-im">Month input</label>
                        <div class="uk-form-controls">
                            <input type="month" id="form-h-im" placeholder="1970-01">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-iw">Week input</label>
                        <div class="uk-form-controls">
                            <input type="week" id="form-h-iw" placeholder="1970-W01">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-iti">Time input</label>
                        <div class="uk-form-controls">
                            <input type="time" id="form-h-iti" placeholder="00:00:00">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-idt">Datetime input</label>
                        <div class="uk-form-controls">
                            <input type="datetime" id="form-h-idt" placeholder="1970-01-01T00:00:00Z">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-idtl">Datetime-local input</label>
                        <div class="uk-form-controls">
                            <input type="datetime-local" id="form-h-idtl" placeholder="1970-01-01T00:00">
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-it">Disabled input</label>
                        <div class="uk-form-controls">
                            <input type="text" id="form-h-itd" placeholder="Text input" disabled>
                        </div>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="form-h-it">Required input</label>
                        <div class="uk-form-controls">
                            <input type="text" id="form-h-itr" placeholder="Text input" required>
                        </div>
                    </div>

                </fieldset>

            </form>

            <form class="uk-form uk-margin">

                <fieldset>
                    <legend>Form grid</legend>

                    <div class="uk-grid">
                        <div class="uk-width-1-1">
                            <input type="text" placeholder="100" class="uk-width-1-1">
                        </div>
                    </div>

                    <div class="uk-grid">
                        <div class="uk-width-1-2"><input type="text" placeholder="50" class="uk-width-1-1"></div>
                        <div class="uk-width-1-4"><input type="text" placeholder="25" class="uk-width-1-1"></div>
                        <div class="uk-width-1-4"><input type="text" placeholder="25" class="uk-width-1-1"></div>
                    </div>

                    <div class="uk-grid" data-uk-grid-margin>
                        <div class="uk-width-medium-1-2">
                            <label for="form-g-a">Label</label>
                            <div class="uk-form-controls">
                                <input type="text" id="form-g-a" placeholder="50" class="uk-width-1-1">
                            </div>
                        </div>
                        <div class="uk-width-medium-1-2">
                            <label for="form-g-b">Label</label>
                            <div class="uk-form-controls">
                                <input type="text" id="form-g-b" placeholder="50" class="uk-width-1-1">
                            </div>
                        </div>
                    </div>
                </fieldset>

            </form>

            <form class="uk-form uk-margin uk-form-stacked">

                <fieldset>
                    <legend>Form stacked grid</legend>

                    <div class="uk-grid">
                        <div class="uk-width-1-1">
                            <label class="uk-form-label" for="form-gs-street">Address</label>
                            <div class="uk-form-controls">
                                <input type="text" id="form-gs-street" placeholder="Street" class="uk-width-1-1">
                            </div>
                        </div>
                    </div>

                    <div class="uk-grid">
                        <div class="uk-width-1-2"><input type="text" placeholder="City" class="uk-width-1-1"></div>
                        <div class="uk-width-1-4"><input type="text" placeholder="State" class="uk-width-1-1"></div>
                        <div class="uk-width-1-4"><input type="text" placeholder="ZIP" class="uk-width-1-1"></div>
                    </div>

                    <div class="uk-grid" data-uk-grid-margin>
                        <div class="uk-width-medium-1-2">
                            <label class="uk-form-label" for="form-gs-a">Label</label>
                            <div class="uk-form-controls">
                                <input type="text" id="form-gs-a" placeholder="50" class="uk-width-1-1">
                            </div>
                        </div>
                        <div class="uk-width-medium-1-2">
                            <label class="uk-form-label" for="form-gs-b">Label</label>
                            <div class="uk-form-controls">
                                <input type="text" id="form-gs-b" placeholder="50" class="uk-width-1-1">
                            </div>
                        </div>
                    </div>
                </fieldset>

            </form>

        </div>

    </body>
</html>